<!--
 * @Description: In User Settings Edit
 * @Author: your name
 * @Date: 2019-07-30 20:02:30
 * @LastEditTime: 2020-02-28 11:25:38
 * @LastEditors: Please set LastEditors
 -->
<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport"
        content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title></title>
    <link rel="stylesheet" type="text/css" href="../css/vant.css">
    <link rel="stylesheet" type="text/css" href="../css/base.css" />
    <script type="text/javascript" src="../script/vue.min.js"></script>
    <script type="text/javascript" src="../script/vant.min.js"></script>
    <script type="text/javascript" src="../script/base.js"></script>
    <script type="text/javascript" src="../script/jquery.js"></script>
    <script type="text/javascript" src="../script/ajaxFileUpload.js"></script>
    <script type="text/javascript" src="../script/layer/mobile/layer.js"></script>
    <style type="text/css">
        .content {
            height: 100%;
            flex: 1;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
        }

        .mainForm {
            display: flex;
            flex-wrap: wrap;
            background-color: #fff;
        }

        .mainForm .van-field {
            width: 50%;
            display: flex;
            align-items: center;
        }



        .van-cell {
            width: 50%;

        }

        .bottomBtn {
            height: 50px;
            width: 100%;
            padding: 10px 10px;
            display: flex;
        }

        .bottomBtn .van-button {
            flex: 1;
            margin: 0 10px;
        }




        .subForm {
            height: 100%;
            overflow-y: auto;
            flex: 1;
            padding: 5px;
            box-sizing: border-box;

        }


        .subFormItem {
            background-color: #fff;
            border-radius: 10px;
            padding: 10px;
            margin: 10px;
            box-sizing: border-box;
        }

        .subForm .div0 {
            display: flex;
            justify-content: space-between;
        }

        .subFormItem .div1 {
            display: flex;
            width: 100%;
            justify-content: space-between;
            align-items: center;
            margin: 5px 0;
        }



        .subFormItem .van-field {
            flex: 1;
        }

        .subFormItem .div1 .van-field {
            flex: 1;
            padding: 0 2px 0 0 !important;
        }

        .subFormItem .van-cell {
            background-color: transparent;
        }

        .number {
            /* margin-left: 6px; */
            line-height: 44px;
            display: flex;
        }

        .number span {
            margin: auto;
            display: inline-block;
            width: 1.5em;
            height: 1.5em;
            line-height: 1.5em;
            background-color: #1989fa;
            border-radius: 50%;
            color: #fff;
            text-align: center;
        }

        #safeTop .van-button__content .van-button__icon {
            color: #323233;
        }

        #app {
            height: 100vh;
            flex: 1;
        }

        .box {
            height: 100vh;
            flex: 1;

        }

        .van-cell::after {
            border-bottom: none !important;
        }


        .table table {
            padding: 0;
            margin: 0;
            width: 100%;
            border-collapse: collapse;
            color: #fff;
            table-layout: fixed;
        }




        .table table tr th {
            text-align: center;
            color: #fff;
            height: 34px;
            white-space: nowrap;
            padding: 0 5px;
            border: 1px solid #808080;
            background-color: #4ba2f9;
            position: sticky;
            white-space: nowrap;
            overflow-x: scroll;
        }

        .table table tr td {
            text-align: center;
            height: 34px;
            white-space: nowrap;
            padding: 0 5px;
            border: 1px solid #808080;
            color: #000;
            position: relative;
            overflow-x: scroll;
        }




        .newlineDiv {
            white-space: normal;
            word-wrap: break-word;
            word-break: break-all;
        }

        .table table tr:active td {
            color: #000;
        }
    </style>
</head>

<body>
    <div id="app" v-cloak>
        <div class="box">
            <van-nav-bar :title="name + '明细'" id="safeTop" left-arrow @click-left="onClickLeft" @click-right="openScan">
                <template #right>
                    <van-button size="small" type="default" icon="scan" v-show="api.deviceModel != 'TC27'"></van-button>
                </template>
            </van-nav-bar>

            <div class="content">
                <div class="mainForm">
                    <van-field style="width:100%" v-model="formData.CreateTime" label="操作日期：" placeholder="自动带出日期"
                        readonly></van-field>
                    <div class="table">
                        <table>
                            <tr>
                                <th width='20%'>型号</th>
                                <th width='40%'>批次</th>
                                <th width='20%'>数量</th>
                                <th width='20%'>操作</th>
                            </tr>
                            <tr v-for=" (item, index) in tableData">


                                <td>
                                    <div class='newlineDiv'>
                                        {{item.ProductName}}
                                    </div>
                                </td>
                                <td>
                                    <div class='newlineDiv'>
                                        {{item.Batch}}

                                    </div>
                                </td>
                                <td>
                                    <div class='newlineDiv'>
                                        {{item.Qty}}

                                    </div>
                                </td>
                                <td>
                                    <van-button type="danger" size="small" @click="deleteItem(index)">删 除
                                    </van-button>
                                </td>
                            </tr>
                        </table>

                    </div>
                </div>


                <div class="bottomBtn">
                    <van-button type="info" @click="confirm">保 &nbsp &nbsp &nbsp &nbsp &nbsp 存
                    </van-button>
                </div>
            </div>
            <audio id="audioPlayer" preload="auto">
                <source src="../image/aigei_com.mp3" type="audio/mpeg">
            </audio>
            <div class="indexBottom">
                汇智云创 技术支持
            </div>
        </div>
    </div>

</body>

<script type="text/javascript">
    var vm;
    apiready = function () {

        var scanTC27 = api.require('scanTC27');
        var FNScanner = api.require('FNScanner');

        api.setScreenOrientation({
            orientation: 'portrait_up'
        });

        api.addEventListener({
            name: 'keyback'
        }, function (ret, err) {
            console.log('ccc');
            vm.onClickLeft()


        });
        vm = new Vue({
            el: '#app',
            data: {
                disabled: false,
                name: api.pageParam.name,
                formData: {
                    CreateTime: '',
                    EightID: 0,
                    AssemblingID: '',
                    AssemblingIDs: [],

                },
                tableData: [],
            },
            created: function () {
                var that = this;
                window.localStorage.setItem('pageName', JSON.stringify(that.name))
                if (api.pageParam.EightID) {
                    APP.ajax('getEightDetail', { EightID: api.pageParam.EightID }, function (res) {
                        console.log(JSON.stringify(res));
                        that.formData = res.ds[0]
                        that.formData.CreateTime = that.formData.CreateTime ? that.formData.CreateTime.replace('T', ' ') : ''
                        that.formData.AssemblingIDs = res.ds1.map(item => item.AssemblingID.toString())
                        that.tableData = res.ds1
                    })
                }
                else {
                    console.log(JSON.stringify(api.pageParam));
                    that.formData.CreateTime = APP.getFormatDate()
                }
                scanTC27.registerReceiver(function (ret, err) {
                    console.log(JSON.stringify(ret));
                    that.AddFormData(ret.barcode)
                })


            },
            mounted() {
                APP.setSafeTop()
                APP.keyBoardChange()
            },

            methods: {
                AddFormData(ret) {
                    var that = this
                    if (ret && ret.indexOf('ZP') != -1) {
                        that.formData.AssemblingID = ret.split('|')[1]
                        if (that.formData.AssemblingIDs.includes(that.formData.AssemblingID)) {
                            that.$dialog.alert({
                                title: '提示',
                                message: '不要重复扫码!',
                            }).then(() => {
                            });
                        } else {
                            that.formData.AssemblingIDs.push(that.formData.AssemblingID)

                            APP.ajax('getAssemblingRecordsDetail', { AssemblingID: that.formData.AssemblingID }, function (res) {
                                if (res.ds[0]) {
                                    res.ds[0].EightIDDE = res.ds[0].EightIDDE ? res.ds[0].EightIDDE : 0
                                    console.log('AssemblingIDres' + JSON.stringify(res.ds[0]))

                                    vm.tableData.push(res.ds[0]);
                                } else {

                                    that.$dialog.alert({
                                        title: '提示',
                                        message: '该装配码不存在!',
                                    }).then(() => {
                                    });
                                }
                            })
                        }

                    }
                },
                openScan() {
                    var that = this
                    console.log('触发');
                    var resultList = api.hasPermission({
                        list: ['camera']
                    });
                    if (resultList[0].granted) {
                        // 已授权，可以继续下一步操作
                        that.openFNScanner()
                    } else {
                        that.$dialog.alert({
                            showCancelButton: true,
                            cancelButtonText: '取消',
                            confirmButtonText: '去设置',
                            title: '提示',
                            message: '应用需要您的授权才能访问相机',
                        }).then(() => {
                            api.requestPermission({
                                list: ['camera'],
                            }, function (res) {
                                if (res.list[0].granted) {
                                    // 已授权，可以继续下一步操作
                                    that.openFNScanner()
                                }
                            });
                        }).catch(() => {
                        });


                    }
                },

                openFNScanner() {
                    var that = this
                    console.log('触发');

                    FNScanner.open({
                        autorotation: true
                    }, function (ret, err) {
                        console.log(JSON.stringify(ret));
                        if (ret) {
                            if (ret.content) {
                                that.AddFormData(ret.content)
                            }
                        } else {
                            vm.$toast('扫描失败');
                        }
                    });
                },
                deleteItem(index) {
                    var that = this
                    this.$dialog.alert({
                        showCancelButton: true,
                        title: '提示',
                        message: '是否确认删除?',
                    }).then(() => {
                        that.tableData.splice(index, 1)
                    }).catch(() => {
                    });


                },

                confirm() {
                    var that = this;
                    var show = true

                    if (that.disabled == false) {
                        that.disabled = true
                        var obj = {
                            AssemblingID: that.formData.AssemblingIDs.join(','),
                            EightID: that.formData.EightID,
                            EightIDDE: that.tableData.map(item => item.EightIDDE).join(',')
                        }
                        console.log(JSON.stringify(obj));
                        APP.ajax('saveEight', obj, function (res) {

                            api.toast({
                                msg: '提交成功！'
                            })

                            setTimeout(() => {
                                api.sendEvent({
                                    name: 'refreshWatertemperatureList'
                                })
                                api.closeWin();
                                that.disabled = false

                            }, 1000);
                        })
                    }



                },
                onClickLeft() {
                    var that = this
                    api.sendEvent({
                        name: 'refreshWatertemperatureList'
                    })
                    api.closeWin()
                },
            }
        })
    };
</script>

</html>